import React, { useState } from 'react';
import { TabBar } from 'antd-mobile';
import './index.less';
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import { history } from 'umi';

export default function home(props: any) {
  const [pathname, setPathname] = useState('');

  const setRouteActive = (value: string) => {
    console.log(history.location.pathname);
    setPathname(value);
    if (value == '/hello/member') {
      if (sessionStorage.getItem('userdata')) {
        history.push(value);
      } else {
        history.push('/login');
      }
    } else {
      history.push(value);
    }
  };
  const tabs = [
    {
      key: '/hello/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/hello/classify',
      title: '分类',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/hello/member',
      title: '信息',
      icon: <MessageOutline />,
    },
    {
      key: '/hello/shopping',
      title: '购物车',
      icon: <MessageOutline />,
    },
    {
      key: '/hello/mine',
      title: '我的',
      icon: <UserOutline />,
    },
  ];
  return (
    <div className="hello">
      <div>{props?.children}</div>
      <TabBar
        defaultActiveKey={pathname}
        activeKey={pathname}
        onChange={(value) => setRouteActive(value)}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}
